<template>
	<view class="course max480" id="pdfDom">

		<!-- <van-button type="primary" class="btn" size="small" @click="getPdf('#pdfDom')">下载证书</van-button> -->
		<view class="pdfDom" ref="myRef">
			<view class="tip">
				<view class="dog-eared-tip">
					<view class="text box box-align-center box-pack-start">
						<view class="name">
							{{user.name}}
						</view>
						<view class="">
							的学情报告
						</view>
					</view>
				</view>
			</view>
			<view class="date">
				{{info.proid}}
			</view>
			<u-image width="100%" height="362rpx" class="posa2"
				src="https://yhlyy.oss-cn-beijing.aliyuncs.com/1561CE3B53BE497C9AED016FFDC2518B11.jpg?Expires=4820281864&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=bTJHpN4eF0s8RxJy4TmscyUmVxA%3D">
				<u-loading slot="loading"></u-loading>
			</u-image>
			<u-image width="100%" height="500rpx" class="posa1"
				src="https://yhlyy.oss-cn-beijing.aliyuncs.com/B1F9E9A501664735B8CDE0A05387781D22.jpg?Expires=4820281895&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=K0CgXYIAnyp%2Bjsna3KqYzyPpRwY%3D">
				<u-loading slot="loading"></u-loading>
			</u-image>
			<view class="white">
				<view class="content">
					<view class="stu-info box box-align-start">
						<u-avatar :size="100" :src="info.icon"></u-avatar>
						<view class="ml10">
							<view class="name">{{info.name}}</view>
							<view class="">
								学号 {{info.xh!=null?info.xh:'无'}}
							</view>
							<view class="school-name mt20">
								{{info.school}}
							</view>
							<view class="school-name mt10">
								{{info.zy + " "+ info.bj}}
							</view>
						</view>
					</view>
					<view class="mt30">
						<view class="box box-align-center ml30">
							<view class="">
								在这
							</view>
							<view class="num ml10 mr10">
								{{info.days}}
							</view>
							<view class="">
								天内，
							</view>
						</view>
						<view class="box box-align-center ml30 mt15">
							<view class="">
								共学习
							</view>
							<view class="time ml10 mr10">
								{{info.time !=null?info.time:0}}
							</view>
							<view class="">
								小时
							</view>
						</view>
					</view>
					<view class="mt30 ml30">
						<view class="tab">
							学习了 {{info.couscnt}}个 课程
						</view>
						<view class="mt20">
							《劳动教育》
						</view>
						<view class="mt10">
							《劳动课程》
						</view>
						<view class="mt20">
							共看了 {{info.videocnt}}个 视频
						</view>
					</view>
					<view class="mt30 ml30">
						<view class="tab-1">
							完成了 {{info.sjcnt}}个 劳动实践
						</view>
						<view class="mt20">
							其中{{info.shenghuocnt}}个生活劳动，
						</view>
						<view class="mt10">
							{{info.shengchancnt}}个生产劳动，
						</view>
						<view class="mt10">
							{{info.fuwucnt}}个服务性劳动
						</view>
						<!-- <view class="mt20">
							得到 10个 优秀，2个 中
						</view> -->
					</view>
					<view class="mt30 ml30">
						<view class="tab-2">
							上传了 {{info.fengcaicnt}}个 班级风采
						</view>
						<view class="mt20">
							被赞 {{info.zancnt}}次
						</view>
						<view class="mt10">
							被评价 {{info.pingjiacnt}}次
						</view>
					</view>
					<view class="ml30 mt30">
						<view class="jy">
							继续努力，<br>
							绽放自己的精彩！
						</view>
						<view class="logo">
							
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="bottom">
			<view class="card">
				<view class="dot">
				</view>
			</view>
			<button class="btn" round>分享报告</button>
		</view>
		<view class="code mt30 box box-tb box-pack-center box-align-center">
			<u-image width="200rpx" height="200rpx"
				src="https://yhlyy.oss-cn-beijing.aliyuncs.com/6918621CB7B1427FA377911DC162E635webwxgetmsgimg.jpg?Expires=4820384724&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=cVx0xKlvjCUrnTi3zOXPSMNyS%2Fc%3D"></u-image>
			<view class="mt10">
				长按识别二维码五育学院查看更多课程
			</view>
		</view>
	</view>
</template>

<script>
	// import html2Canvas from "html2canvas";
	// import JsPDF from "jspdf";
	export default {
		data() {
			return {
				id: '',
				user: uni.getStorageSync('user'),
				info: {

				},
				isShow: false,
				isCanvas: true,
				downType: true, // false为 pdf , true为图片
			}
		},
		onLoad(opt) {
			//console.log(opt.id);
			this.id = opt.id;
			this.getData();
		},
		methods: {
			getData() {
				let opts = {
					url: '/tongji/stureport',
					method: 'post'
				};
				let params = {
					stuid: this.user.id
				};
				this.$api.post(opts, params).then(res => {
					//console.log(res);
					if (res.code == 0) {
						this.info = res.reportinfo
						
					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tip {
		position: relative;
		margin-left: -10rpx;
		width: 379rpx;
		height: 68rpx;
		background: #8C5FFF;
		border: 2rpx solid #000000;
		border-radius: 4rpx;
		z-index: 20;
	}

	.dog-eared-tip {
		font-size: 13px;
		position: absolute;
		top: -10rpx;
		left: 0;
		text-align: center;
		width: 360rpx;
		height: 61rpx;
		line-height: 61rpx;
		background: #000000;
		border-radius: 4rpx;
	}

	.text {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		background: linear-gradient(-8deg, #7887EC 0%, #E3E7FF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;

		.name {
			width: 168rpx;
			min-width: 168rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.dog-eared_tip:before,
	.work_tip:after {
		content: "";
		position: absolute;
		z-index: -2;
		-moz-transform: rotate(-3deg);
		-webkit-transform: rotate(-3deg);
		-o-transform: rotate(-3deg);
		-ms-transform: rotate(-3deg);
		transform: rotate(-3deg);
		bottom: 15px;
		box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
		height: 50%;
		left: 10px;
		max-height: 100px;
		max-width: 300px;
		width: 50%;
	}

	.dog-eared_tip:after {
		-moz-transform: rotate(3deg);
		-webkit-transform: rotate(3deg);
		-o-transform: rotate(3deg);
		-ms-transform: rotate(3deg);
		transform: rotate(3deg);
		left: auto;
		right: 10px;
	}

	.course {
		position: relative;
		padding-bottom: 50px;
		box-sizing: border-box;
		// height: 100%;
		min-height: 100%;
		background: linear-gradient(#A072FF, #C3D8FB, #6EA1F8);
		overflow-y: auto;
		z-index: -200;
	}

	//证书样式

	.pdfDom {
		/* 要想pdf周边留白，要在这里设置 */
		//   padding: 20px;
		//   width: 750px;
		margin: 20px 20px 0 20px;
		position: relative;
		height: 100%;
		background: linear-gradient(transparent, #000);
	}

	.date {
		position: absolute;
		top: 120rpx;
		left: 50rpx;
		width: 480rpx;
		height: 28rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #E1DCF4;
		line-height: 28rpx;
	}

	.posa1 {
		position: absolute;
		width: 100%;
		top: 35rpx;
		left: 0;
		z-index: -11;
	}

	.posa2 {
		position: absolute;
		width: 100%;
		top: 173rpx;
		left: -10rpx;
		z-index: -20;
	}

	.white {
		position: relative;
		margin-top: 125rpx;
		margin-left: -10rpx;
		border-top-right-radius: 35px 150px;
		border-bottom-right-radius: 5px 150px;
		border: 2rpx solid #000000;
		width: 652rpx;
		height: auto;
		background-color: #fff;
		z-index: 2;
		filter: drop-shadow(0px 0px 15px #bbb);



		// &:before {
		// 	content: '';
		// 	display: block;
		// 	position: absolute;
		// 	right: -60px;
		// 	top: 0;
		// 	width: 60px;
		// 	height: 50px;
		// 	background: linear-gradient(42deg, #ddd 30%, rgba(0, 0, 0, 0) 40%)
		// }

		.content {
			padding: 20px;
			z-index: 100;

			.stu-info {
				.name {
					font-size: 40rpx;
					font-weight: bold;
				}

				.school-name {
					box-sizing: border-box;
					padding: 0 5px;
					width: auto;
					max-width: 500rpx;
					height: 45rpx;
					line-height: 45rpx;
					background: linear-gradient(-28deg, #FFF2F2, #E4E5FF);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;
				}

			}

			.num {
				width: 88rpx;
				height: 55rpx;
				font-size: 72rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-style: italic;
				color: #8B5EFE;
				line-height: 42rpx;
				text-align: center;
			}
			.time{
				width: 111rpx;
				height: 55rpx;
				font-size: 72rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-style: italic;
				color: #010101;
				line-height: 42rpx;
				text-align: center;
			}
			
			
			.tab, .tab-1, .tab-2{
				width: 315rpx;
				height: 45rpx;
				line-height: 45rpx;
			}
			.tab{
				background: linear-gradient(-72deg, #BFE0F7, #F5FFFF);
			}
			.tab-1{
				background: linear-gradient(-72deg, #BFF7F0, #FFFBF5);
			}
			.tab-2{
				background: linear-gradient(-72deg, #F7EABF, #F5FFFF);
			}
			
			.jy{
				font-size: 38rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
				line-height: 60rpx;
			}
		}
	}

	.bottom {
		margin-top: -30px;
		width: 750rpx;
		height: 240rpx;
		background: #3B4FDA;
		border: 2rpx solid #000000;
		// border-radius: 14rpx;
		z-index: -2;

		.card {
			margin-top: 35rpx;
			width: 745rpx;
			height: 48rpx;
			background: #3B4FDA;
			border: 2rpx solid #000000;
			border-radius: 14rpx;

			.dot {
				margin: 10rpx auto;
				width: 721rpx;
				height: 23rpx;
				background: #000000;
				border: 2rpx solid #000000;
				border-radius: 12rpx;
				
				
			}
		}
		.btn{
			margin-top: 40rpx;
			width: 251rpx;
			height: 80rpx;
			background: #FFC22E;
			border: 2rpx solid #000000;
			border-radius: 40rpx;
			line-height: 80rpx;
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
		}
	}
</style>

